<template>
	<el-dialog :visible="dialogVisible" title="修改密码" width="500px" @close="dialogVisible = false" append-to-body>
    <el-form
      ref="ruleForm"
      label-position="left"
      :model="formData"
      :rules="rules"
      class="el-form"
    >
      <el-form-item label="旧密码:" prop="oldPassword" auto-complete="new-password" class="w100p">
        <el-input v-model="formData.oldPassword" clearable/>
      </el-form-item>
      <el-form-item label="新密码:" prop="newPassword" class="w100p">
        <el-input v-model="formData.newPassword"  auto-complete="new-password" clearable/>
      </el-form-item>
      <el-form-item label="确认密码:" prop="checkPass" auto-complete="new-password" class="w100p">
        <el-input v-model="formData.checkPass" clearable/>
      </el-form-item>
    </el-form>
		<div slot="footer" class="dialog-footer">
			<span class="dialog-footer">
				<el-button class="cancelbtn" @click="dialogVisible = false">取消</el-button>
				<el-button class="savebtn" type="primary" @click="save('ruleForm')">确认</el-button>
			</span>
		</div>
	</el-dialog>
</template>

<script>
import UserApi from "@/api/system-settings/user-manage"
export default {
  name: "",
  components: {},
  data() {
    const validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      }else if (value.length < 6) {
        callback(new Error("密码不得小于六位"));
      } else {
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.formData.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      formData:{},
      rules:{
        oldPassword:[{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newPassword:[{ required: true, message: '请输入新密码', trigger: 'blur' },{ validator: validatePass1, trigger: 'blur'}],
        checkPass: [{ required: true, message: '请再次输入密码', trigger: 'blur' },{ validator: validatePass2, trigger: 'blur' } ],
      },
      dialogVisible:false,
    };
  },
  computed: {
  },
  watch: {
  },
  created() {},
  mounted() {
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
      this.$nextTick(()=>{
        this.formData = {}
        this.$refs['ruleForm'].resetFields()
      })
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          const params = {
            ...this.formData,
            userId: sessionStorage.getItem('userId')
          }
          console.log(params);
          UserApi.updatePassword(params).then(async res => {
            if (res.success === true) {
              this.$message.success("修改成功,请重新登陆！");
              await this.$store.dispatch("user/logout");
              this.$router.push(`/login?redirect=${this.$route.fullPath}`);
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
  }
};
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog{
    z-index:3000;
  }
  ::v-deep .el-input{
    width: 80%;
  }
</style>
